<template>
    <div class="container">
         <div class="contents" v-for="item in items" :key="item">
           <el-row class="row">
                <el-col :span="4" class="tip">昵称</el-col>
                <el-col :span="16" class="detail">{{ item.name }}</el-col>
           </el-row>
           <el-row class="row">
                <el-col :span="4" class="tip">性别</el-col>
                <el-col :span="16" class="detail">{{ item.sex }}</el-col>
           </el-row>
           <el-row class="row">
                <el-col :span="4" class="tip">注册时间</el-col>
                <el-col :span="16" class="detail">{{ item.age }}</el-col>
           </el-row>
           <el-row class="row">
                <el-col :span="4" class="tip">邮箱</el-col>
                <el-col :span="16" class="detail">{{ item.id }}</el-col>
           </el-row>
        </div>
    </div>

</template>
<script>
export default {
    data(){
        return{
            items:[
                {
                    name:"张三",
                    sex:"男",
                    age:"2022-3-22",
                    id:123456789
                }
            ]
          }
    },
    methods:{
    
  }
};
</script>
<style scoped>
.container{
    background: rgba(245,245,245,1);
}
.contents{
    position: absolute;
    background: rgb(255,255,255);
    width: 90%;
    left: 5%;
    height: 90%;
    top:5%;
    border-radius: 10px;
}
.row{
    height: 40px;
    margin-top: 50px;
}
.tip{
    font-size: 18px;
    color: rgb(156, 156, 156);
    font-weight: 600;
}
.detail{
    text-align: left;
    font-size: 17px;
}
</style>